<template>
	<view class="wrap">
		<!-- 头部导航 -->
		<top-tabtar tabTitle="我的"  @backClick="backClick" backColor="#5B2177" :back="false">
			<view slot="tab-right">
				<uni-badge text="1" type="error"  size="small"  absolute="rightTop">
					<view class="iconfont icons"  style="color: #fff;font-size: 45rpx;" @click="jump('/pages/my/message')">&#xe603;</view>
				</uni-badge>
			</view>
		</top-tabtar>
		<view class="user-border">
			<view class="back-border"></view>
			<!-- 头像用户名 -->
			<view class="user-name-box">
				<view class="user-back">
					<view class="user-id-name">
						<view class='img-name-id'>
							<view class="profile-picture">
								<image class="imge" mode="scaleToFill" src="../../static/home/portrait_a.jpg"></image>
							</view>
							<view class="item-naem-id">
								<view class="grade-id-box">
									<view class="code-id">我站在一个</view>
									<view class="vip-level ">VIP0</view>
								</view>
								<view class="name">千库ID：25199803</view>
							</view>
						</view>
						<view class="signin-vip" @click="jump('/pages/my/sign/sign')">签到领会员</view>
					</view>
					<!-- 积分-佣金-推广-下级 -->
					<view class="integral-money">
						<view class="sub-box"  @click="jump('/pages/my/sign/store')">
							<view>18681</view>
							<view class="name">可用积分</view>
						</view>
						<view class="sub-box"  @click="jump('/pages/my/agency/wallet')">
							<view>14252</view>
							<view class="name">代理佣金</view>
						</view>
						<view class="sub-box">
							<view>3</view>
							<view class="name">推广</view>
						</view>
						<view class="sub-box" @click="jump('/pages/my/agency/my_level')">
							<view>11</view>
							<view class="name">直属下级</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		

			<!-- 开通会员图与邀请好友图 -->
			<view class="add-vipimg-friendimg">
				<image class="invite-img" src="/static/my/invite.png"></image>
				<image class="invite-img" src="/static/my/buy_vip.jpeg"  @click="jump('/pages/my/buy_vip/buy_vip')"></image>
			</view>
			<!-- 主播 -->
			<view class="anchor">
				<image class="anch-img" src="/static/my/anchor.png"></image>
			</view>

		<!-- 主体内容 -->
		<view class="my-main">
			<!-- 更多功能 -->
			<view class="more-function">
				<view class="more-function-box">
					<view>更多功能</view>
				</view>
				<view class="funtion-skip-box">
					<view v-for="(item,index) in iconList" :key="item.id" class="funtion-ioce"  @click="jump(item.path)">
						<view class="skip-img"><image :src="item.url" class="imges" mode="aspectFill"></image></view>
						<view class="text">{{item.name}}</view>
					</view>
				</view>
			</view>
			<!-- 我看过的 -->
			<view class="read-have">
				<view class="have-seen">
					<view class="more-function-box">
						<view>我看过的</view>
					</view>
					<view class="have-seen-title">
						<view class="text">展开全部</view>
						<view class="iconfont">&#xe61d;</view>
					</view>
				</view>
				<!-- 视频列表 -->
				<view class="video-sort">
					<view class="small-video" >
						<view v-for="(item,i) in homeList" :key="item.id" class="video-alone">
							<view class="main-video">
								<image :src="item.url" class="imge"></image>
								<view class="vip-logo">免费</view>
								<view class="img-list-text">被乖乖洋胡一天萌哭了！被乖乖洋胡一天萌哭了！被乖乖洋胡一天萌哭了！</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部导航 -->
		<tabber :tabIndex="4"></tabber>
	</view>
</template>

<script>
	import topTabtar from '@/components/top-tabbar.vue'
	import tabber from '@/components/tabbar.vue'
	export default {
		components:{ tabber, topTabtar },
		data() {
			return {
				statuHeight: uni.getSystemInfoSync().statusBarHeight,
				homeList: [
					{ id: 2, text:'这是一个影片的这是一个影片的这是一个影片的', url: 'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg'},
					{ id: 3, text:'这是一个影片的这是一个影片的这是一个影片的', url: 'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg'},
					{ id: 4, text:'这是一个影片的这是一个影片的这是一个影片的', url: 'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg'},
					{ id: 5, text:'这是一个影片的这是一个影片的这是一个影片的', url: 'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'}
				],
				iconList: [
					{ id: 1, url: '/static/my/camera.png', name: '我的上传',path: '/pages/my/my_upload' },
					{ id: 2, url: '/static/my/deal.png', name: '交易记录', path: '/pages/my/deal/deal_record' }, 
					{ id: 3, url: '/static/my/cache.png', name: '缓存历史', path: '/pages/my/download' },
					{ id: 4, url: '/static/my/agency.png', name: '代理中心', path: '/pages/my/agency/agency' },
					{ id: 5, url: '/static/my/collect.png', name: '我的收藏',  path: '/pages/my/collect' }, 
					{ id: 6, url: '/static/my/comment.png', name: '我的评论',  path: '/pages/my/comment' },
					{ id: 7, url: '/static/my/production.png', name: '我的作品',  path: '/pages/my/product' }, 
					{ id: 8, url: '/static/my/agency.png', name: '礼物背包',  path: '/pages/my/product' }, 
					{ id: 9, url: '/static/my/exchange.png', name: '兑换记录',  path: '/pages/my/product' }, 
					{ id: 10, url: '/static/my/set.png', name: '我的设置', path: '/pages/my/set/set' }
				]
			}
		},
		onShow() {
			// 隐藏官方tabber
			uni.hideTabBar()
		},
		methods: {
			// 跳页面
			jump(path) {
				uni.navigateTo({
					url: path
				})
			}
		},
	}
</script>
<style lang="scss" scoped>
	.wrap{
		background: #f2f2f2;
		// height: 100vh;
		/deep/ .uni-badge--error{
				top:0px !important;
				right: -15px !important;
			}
			.user-border{
				position: relative;
				height: 290rpx;
				.back-border{
					width: 100%;
					height: 110rpx;
					background: #5B2177;
					position: relative;
				}
				.back-border:after { 
					position:absolute; 
					left:0; 
					right:0; 
					bottom:-27px; 
					content:""; 
					z-index:1; 
					height:50px; 
					width:100%; 
					border-radius:50%; 
					background:#F2f2f2; 
				}
				.user-name-box{
					padding: 0 30rpx;
					position: absolute;
					top: 0rpx;
					left: 0;
					z-index: 9;
					.user-back{
						box-sizing: border-box;
						width: 690rpx;
						background: #FFFFFF;
						box-shadow: 0px 0px 16rpx 0px rgba(0, 0, 0, 0.08);
						border-radius: 20rpx;
						height: 290rpx;
					}
					.user-id-name{
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 44rpx 30rpx 38rpx 0rpx;
						.img-name-id{
							display: flex;
							align-items: center;
							.profile-picture{
								width: 108rpx;
								height: 108rpx;
								border-radius: 50%;
								margin: 0 30rpx;
								.imge{
									width: 100%;
									height: 100%;
									border-radius: 50%;
								}
							}
							.item-naem-id{
							
								.grade-id-box{
									display: flex;
									align-items: center;
									margin-bottom: 8rpx;
									.code-id{
										// width: 250rpx;
										font-size: 34rpx;
										font-family: SourceHanSansCN;
										font-weight: 600;
										color: #333333;
										display: -webkit-box;
										-webkit-box-orient: vertical;
										-webkit-line-clamp: 1;
										overflow: hidden;
									}
									.vip-level{
										margin:0 0 10px 20rpx;
										padding: 1px 4px;
										border: 1px solid #F35C2B;
										border-radius: 8px;
										font-size: 8px;
										color: #F35C2B;
										text-align: center;
									}
								}
								.name{
								font-size: 22rpx;
								font-family: SourceHanSansCN;
								font-weight: 400;
								color: #808080;
								}
							}
						}
						.signin-vip{
							width: 165rpx;
							height: 46rpx;
							background: #892EEE;
							border-radius: 4rpx;
							line-height: 46rpx;
							text-align: center;
							font-size: 24rpx;
							font-family: SourceHanSansCN;
							font-weight: 400;
							color: #FFFFFF;
							margin-bottom:auto;
						}
					}
					// 积分-佣金-推广-下级
					.integral-money{
						display: flex;
						justify-content: space-between;
						align-items: center;
						color: #333333;
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: bold;
						padding: 0 26rpx 30rpx 26rpx;
						.sub-box{
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							.name{
								font-family: PingFang SC;
								font-weight: 400;
								color: #666666;
							}
						}
					}
				}
			}
	}
	// 开通会员图与邀请好友图
	.add-vipimg-friendimg{
		width: 100%;
		height: 195rpx;
		background: #FFFFFF;
		margin-top: 33rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 33rpx;
		box-sizing: border-box;
		.invite-img{
			width: 329rpx;
			height: 120rpx;
			border-radius: 10rpx;
		}
	}
	.anchor{
		width: 100%;
		height: 140rpx;
		padding: 0 24rpx;
		box-sizing: border-box;
		margin-top: 25rpx;
		.anch-img{
			width: 100%;
			height: 100%;
		}
	}
	// main
	.my-main{
		// margin-bottom: 85px;
		.more-function{
			margin-top: 34rpx;
			background: #FFFFFF;
			padding: 46rpx 22rpx 53rpx 33rpx;
			.more-function-box{
				display: flex;
				align-items: center;
				font-size: 32rpx;
				font-family: Adobe Heiti Std;
				font-weight: bold;
				color: #111B3B;
			}
			.funtion-skip-box{
				display: flex;
				flex-wrap: wrap;
				padding-left: 20rpx;
				.funtion-ioce{
					width: 101rpx;
					margin: 42rpx 83rpx 0 0;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					.skip-img{
						width: 55rpx;
						height: 54rpx;
						.imges{
							width: 100%;
							height: 100%;
							
						}
					}
					.text{
						font-size: 22rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #333333;
						margin-top: 22rpx;
					}
				}
				.funtion-ioce:nth-child(4n) {
					margin-right: 0 !important;
				}
			}
		}
		// 我看过的
		.read-have{
			margin-top: 50rpx;
			padding: 0 22rpx 140rpx 33rpx;
			.have-seen{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.more-function-box{
					display: flex;
					align-items: center;
					font-size: 32rpx;
					font-family: Adobe Heiti Std;
					font-weight: bold;
					color: #111B3B;
				}
				.have-seen-title{
					display: flex;
					align-items: center;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;
					.iconfont{
						margin-left: 18rpx;
					}
				}
			}	
				// 视频列表
				.video-sort{
					// 取消下滑条
					.small-video::-webkit-scrollbar {
					  display: none;
					}
						.small-video{
							display: flex;
							margin: 38rpx 0 20rpx 0;
							display: -webkit-box;
							overflow-y: hidden;
							.video-alone{
								margin-right: 27rpx;
								.main-video{
									width: 339rpx;
									height: 192rpx;
									border-radius: 10rpx;
									position: relative;
									.imge{
										width: 100%;
										height: 100%;
										border-radius: 10rpx;
									}
									.vip-logo{
										position: absolute;
										left: 9rpx;
										top: 24rpx;
										font-size: 20rpx;
										font-family: PingFang SC;
										font-weight: bold;
										color: #FFFFFF;
									}
									.img-list-text{
										position: absolute;
										left: 9rpx;
										bottom: 15rpx;
										font-size: 24rpx;
										font-family: PingFang SC;
										font-weight: 400;
										color: #FFFFFF;
										display: -webkit-box;
										-webkit-box-orient: vertical;
										-webkit-line-clamp: 1;
										overflow: hidden;
									}
								}
							}
						}
				}
			
		}
	}
</style>
